import React from 'react'

import { TabBar } from 'antd-mobile';
import {withRouter} from "react-router-dom"
 class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    console.log(props)//里面有locoation.pathname==选中的那一项
    this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: true,
    };
  }

  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
        <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
        <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              hidden: !this.state.hidden,
            });
          }}
        >
      
        </a>
        <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              fullScreen: !this.state.fullScreen,
            });
          }}
        >
         
        </a>
      </div>
    );
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#ff2d4a"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="index"
            icon={<i className="iconfont icon-shouye"></i>
           
            }
            selectedIcon={<i className="iconfont icon-shouye" style={{color:"#ff2d4a"}}></i>
            }
            selected={this.props.location.pathname==="/"}
          
            onPress={() => {
             
               this.props.history.push("/");
            
            }}
          
          >
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
             icon={<i className="iconfont icon-fenlei"></i>}
           
            selectedIcon={
                <i className="iconfont icon-fenlei" style={{color:"#ff2d4a"}}></i>
            }
            title="分类"
            key="category"
            badge={'new'}
            selected={this.props.location.pathname==="/categort"}
            onPress={() => {
              this.props.history.push("/categort");
            }}
          
          >
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
             icon={<i className="iconfont icon-gouwuche"></i>}
            selectedIcon={
                <i className="iconfont icon-gouwuche " style={{color:"#ff2d4a"}}></i>
            }
            title="购物车"
            key="cart"
        
            selected={this.props.location.pathname==="/cart"}
            onPress={() => {
              this.props.history.push("/cart");
            }}
          >
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-me"></i>}
            selectedIcon={ <i className="iconfont icon-me " style={{color:"#ff2d4a"}}></i>}
            title="我的"
            key="my"
            selected={this.props.location.pathname==="/my"}
            onPress={() => {
              this.props.history.push("/my");
            }}
          >
            {this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(TabBarExample)
